<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dom 的property</title>
    <style>
      #div1 {
        border: 1px solid #eee;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <p class="header">我是p标签，class为header</p>
    <p id="footer">我是p标签，id为footer</p>

    <div id="div1">div1 节点</div>

    <script>
      const pList = document.querySelectorAll('p');
      const p1 = pList[0];

      // DOM 的 property
      console.log(p1.style.width); // 获取样式
      p1.style.height = '200px';

      console.log(p1.className); // 获取class

      console.log(p1.nodeName); // 获取nodeName，P
      console.log(p1.nodeType); // 获取nodeType，1

      // DOM 的attribute
      p1.setAttribute('data-name', 'customData');
      console.log(p1.getAttribute('data-name'));
      p1.setAttribute('style', 'font-size: 30px;');
      console.log(p1.getAttribute('style'));

      const div1 = document.getElementById('div1');
      //   添加新节点
      const p2 = document.createElement('p');
      p2.innerHTML = 'this is p1 node';
      div1.appendChild(p2); // 添加新创建的元素

      // 移动已有节点
      const p_footer = document.getElementById('footer');
      div1.appendChild(p_footer);

      // 获取父元素
      console.log(div1.parentNode); // 返回一个元素
      // 获取子元素列表
      console.log(div1.childNodes); // 返回一个NodeList对象
    </script>
  </body>
</html>
